<template>
	<view>
		<cu-custom bgColor="bg-white" isBack="true" bgImage="../../static/icon/custom-tabar.png">
			<block slot="content">支付密码设置</block>
		</cu-custom>
		
		<view>
			<view class="cu-form-group text-gray bg">
				您的账号已绑定手机号：{{geTel(user.phone)}}，如需更换手机号请到“手机号换绑”设置进行更换。
			</view>
			<form @submit="submit">
		
				<view class="cu-form-group bg">
					<view class="title">支付密码</view>
					<input placeholder="请输入支付密码" name="newPassword" password="true"></input>
				</view>
				<view class="cu-form-group bg border-bottom">
					<view class="title">验证码</view>
					<input placeholder="请输入验证码" name="code"></input>
					<button class='cu-btn bg-pick radius-100 color-100 shadow' style="min-width:100px;" @click="sendCode" :disabled="count>0">
						{{count > 0 ? count + ' s' : '发送验证码'}}
					</button>
				</view>
				<view class="text-gray text-tip">
					支付密码不能与APP登录密码相同
				</view>
				<view class="flex justify-center">
					<button class="cu-btn bg-btn-pick color-100 margin-tb-sm lg round btn" form-type="submit">确认</button>
				</view>
			</form>
		</view>
		
		
	</view>
</template>

<script>
	import { mapActions, mapState } from 'vuex';
	import UserService from '../../service/user.js';
	export default {
		computed: {
			...mapState({
				user: ({ user }) => user.userInfo,
			}),
		},
		data() {
			return {
				count: '',
				timer: null,
			};
		},
		methods:{
			...mapActions(['updatePay']),
			//隐藏手机号中间4位
			geTel(tel) {
				const reg = /^(\d{3})\d{4}(\d{4})$/;
				return tel.replace(reg, "$1****$2");
			},
			// 发送验证码
			async sendCode () {
				const TIME_COUNT = 60;
				if(!this.user.phone){
					return this.$api.msg("当前账号没有手机号")
				}
				const params = {
					type: 1,
					phone:this.user.phone
				}
				if (!this.timer) {
					const code = await UserService.getCode(params)
					this.count = TIME_COUNT;
					this.timer = setInterval(() => {
					if (this.count > 0 && this.count <= TIME_COUNT) {
						this.count--;
					} else {
						clearInterval(this.timer);
						this.timer = null;
					}
				   }, 1000)
				  }
			},
			async submit(e) {
				const data = e.detail.value;
				const phone = this.user.phone
				if(!data.newPassword){
					return this.$api.msg("请输入支付密码")
				}
				if(!data.code){
					return this.$api.msg("请输入验证码")
				}
				const formdata= {
					...data,
					phone,
					u:phone
				}
				await this.updatePay(formdata)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
	.bg-btn-pick {
		background: linear-gradient(270deg, #C529DA 0%, #FA81CE 100%);
	}
	.color-100{
		color: #FFFFFF;
	}
	.bg-pick {
		background-color: #E428FD;
	}
	.btn{
		width: 240px;
		margin-top: 80px;
	}
	.text-tip{
		font-size: 10px;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 28px;
		color: #999999;
		padding-left: 13px;
	}
	.bg{
		background-color: #F7F7F7 !important;
	}
	.border-bottom{
		border-bottom: 1px solid #E6E6E6;
	}
	.cu-form-group+.cu-form-group {
		border-top: 1px solid #E6E6E6;
	}
</style>
